<template>
	<!-- 个人资料 -->
    <div class="personal-config">
      <!-- 导航 -->
      <tz-breadcrumb  :pathArr='[{"name": "设置"},{"name": "个人资料", "url": "/personalconfig"}]'></tz-breadcrumb>
      <!-- 数据表单 -->
<div style="margin: 20px;"></div>
<el-card class="box-card">
  <div class="text item">
      <el-tabs :value="active" v-loading="loading">
    <el-tab-pane label="个人信息" name="information">
      <!-- 个人信息 -->
      <el-form  class="" label-width="80px">
        <el-form-item label="帐号">
          <el-input class="form-input" value="17681849188" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="等级">
          <el-input  class="form-input" value="一级代理商" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input  class="form-input" value="杨永光" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="分佣比率">
          <el-input  class="form-input" value="80%" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="入驻时间">
          <el-input  class="form-input" value="2018-11-01 08:00:00" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="当前余额">
          <el-button type="text" size="medium" style="font-size:22px;">2050.98元</el-button>
        </el-form-item>
        <img src="" width="300px">
          <el-form-item>
          <el-button type="primary" >保存修改</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>

    <el-tab-pane label="修改手机号码" name="editphone">
       <!-- 修改手机号码 -->
      <el-form  class="" label-width="200px">
        <el-form-item label="旧号码">
          <el-input class="form-input" v-model="tel" readonly="readonly"></el-input>
        </el-form-item>
         <el-form-item label="图形验证码">
          <el-input  class="form-input"  v-model="modifyPasData.imgcode" placeholder='请输入图形验证码'>
             <template slot="append" >
                      <span v-on:click="changeimg" :class="showImgText?'show-img':'hide'">点击获取图片</span>
                      <img v-bind:src="imgUrl" class="img-path" :class="showImgText?'hide':'show-img'" v-on:click="changeimg"/>
              </template>
          </el-input>
        </el-form-item>
        <el-form-item label="验证码" class="form-item">
              <el-input placeholder="请输入验证码" v-model="modifyPasData.code"  clearable>
                    <template slot="append">
                      <input type="button" class=" btn btn-no-bg"  v-bind:disabled="SMSSendClick" v-model="txtusersend" />
                      <div class="img-path send-btn" v-on:click="getCode"></div>
                    </template>
              </el-input>
        </el-form-item>
        <el-form-item label="新号码">
          <el-input class="form-input" v-model="newPhone"  placeholder='请输入真实的手机号码'></el-input>
        </el-form-item>
          <el-form-item>
          <el-button type="primary" @click="modifyMobile" v-loading.fullscreen.lock="fullscreenLoading1">保存修改</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="修改密码" name="editpass">
      <!-- 修改密码 -->
      <el-form  class="" label-width="200px">
        <el-form-item label="手机号码">
          <el-input class="form-input"  v-model='tel' readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="图形验证码">
          <el-input  class="form-input"  v-model="modifyPasData.imgcode" placeholder="请输入图形验证码">
             <template slot="append" >
                      <span v-on:click="changeimg" :class="showImgText?'show-img':'hide'">点击获取图片</span>
                      <img v-bind:src="imgUrl" class="img-path" :class="showImgText?'hide':'show-img'" v-on:click="changeimg"/>
              </template>
          </el-input>
        </el-form-item>
        <el-form-item label="验证码" class="form-item">
              <el-input placeholder="请输入验证码" v-model="modifyPasData.code"  clearable>
                    <template slot="append">
                      <input type="button" class=" btn btn-no-bg"  v-bind:disabled="SMSSendClick" v-model="txtusersend" />
                      <div class="img-path send-btn" v-on:click="getCode"></div>
                    </template>
              </el-input>
        </el-form-item>
        <!-- <el-form-item label="旧密码">
          <el-input class="form-input" ></el-input>
        </el-form-item> -->
         <el-form-item label="新密码">
          <el-input type="password"  class="form-input" v-model="modifyPasData.newPassword" placeholder="密码至少8位，字母、数字、特殊符号（必须包含其中两个）"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input type="password"  class="form-input" v-model="modifyPasData.refPassword" placeholder="请确认新密码"></el-input>
        </el-form-item>
          <el-form-item>
          <el-button type="primary" @click="modifyPassword" v-loading.fullscreen.lock="fullscreenLoading2">保存修改</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
        <el-tab-pane label="绑定公众号" name="bindgzh">
          <el-tag type="warning">必须要绑定好微信公众号才使用正常使用后台，请使用常用的微信扫码绑定</el-tag>
          <br><br>
      <!-- 绑定公众号 -->
<!--       <img src="./../../public/img/gongzh.jpg"  width="300px"> -->
        <!-- 二维码 -->
        <div v-if="gzhQr">
              <tz-qrcode :data='gzhQr' :width='300'></tz-qrcode>
        </div>
        <div v-else>
        <img src="./../../public/img/default_upic.png"  width="300px">
        </div>
        <!-- 状态 -->
        <div v-if="open_id">
              <el-button type="success">已绑定</el-button>
        </div>
        <div v-else>
        <el-button type="warning">未绑定</el-button>
        </div>
      
    </el-tab-pane>
    <el-tab-pane label="推广二维码" name="tuiQr">
      <!-- 推广二维码 -->
      <el-form  class="" label-width="120px">

        <el-form-item label="分享二维码">
<!--           <tz-qrcode :data='tuigQr' :width='200'></tz-qrcode> -->
          <img src="./../../public/img/default_upic.png"  width="200px" height="200px">
        </el-form-item>
        
      </el-form>
    </el-tab-pane>
  </el-tabs>
  </div>
</el-card>

    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  data: function () {
    return {
      // 所属商户
      active: this.$route.query.active ? this.$route.query.active : 'information',
      tableData2: '',
      tableData3: [],
      fullscreenLoading1: false,
      fullscreenLoading2: false,
      // 公众号绑定二维码
      gzhQr: '',
      // 个人推广二维码
      tuigQr: '',
      // 微信open_id
      open_id: '',
      token: localStorage.getItem('token'),
      // 新手机号码
      newPhone: '',
      // 登录者的手机号码
      tel: '',
      code: this.$route.query.identification_code ? this.$route.query.identification_code : '',
      tableData: [],
      extension_code: '',
      loading: false,
      // 修改密码的参数
      modifyPasData: {
        imgcode: '',
        code: '',
        // 旧密码
        oldPassword: '',
        // 新密码
        newPassword: '',
        // 确认密码
        refPassword: '',
        // 对应的图片验证码获取的key值
        verificationKey: ''
      },
      // 发送验证码是否可以点击fales可以点击
      SMSSendClick: false,
      // 发送验证码的文字显示
      txtusersend: '发送验证码',
      // 显示图片的地址
      imgUrl: '',
      // 点击获取图片的字的显示
      showImgText: true,
      // 修改手机号防爆点击
      makesure1: true,
      // 修改密码防爆点击
      makesure2: true
    };
  },
  mounted: function () {
    // 获取用户信息
    this.initdata();
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  methods: {
    // 获取用户信息
    initdata () {
      let that = this;
      that.loading = true;
      http.get(api.userInfo, {
        token: localStorage.getItem('token')
      }, response => {
        console.log(response);
        if (response.code === '10001') {
          that.loading = false;
          that.tableData2 = response.data[0].result;
          that.tel = response.data[0].result.phone;
          that.gzhQr = response.data[0].result.gzhQr;
          that.tuigQr = response.data[0].result.extension_code;
          that.open_id = response.data[0].result.open_id;
        } else {
          that.$message.error(response.msg);
          that.loading = false;
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
        that.loading = false;
      });
    },
    // 获取图形验证码
    changeimg () {
      console.log(1);
      let that = this;
      http.get(api.captcha, {}, (res) => {
        console.log(res);
        if (res.code === '10001' && res.status === 'SUCCESS') {
          // 点击发送图片不显示
          that.showImgText = false;
          // 获取对应的图片src路径
          that.imgUrl = res.data[0].captcha_image_content;
          // 获取对应的验证码key值
          that.modifyPasData.verificationKey = res.data[0].captcha_key;
          return false;
        };
        that.$message.error(res.msg);
      }, () => {
        that.$message.error('网络错误，请稍候再试');
      });
      return true;
    },
     // 发送短信验证码
    getCode () {
      let that = this;
      // // 手机号码格式规范
      // var mobilephoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
      // if (!mobilephoneReg.test(that.modifyPasData.tel)) {
      //   alert('手机号格式不正确');
      //   return false;
      // }
      if (that.SMSSendClick === true) {
        return false;
      }
      if (that.modifyPasData.imgcode === '') {
        that.$message.error('图形验证码不能为空');
        return false;
      }
      // 初始化60s
      var second = 60;

      http.get(api.sendsms, {
        mobile: that.tel,
        verification_code: that.modifyPasData.imgcode,
        verification_key: that.modifyPasData.verificationKey
      }, (res) => {
        console.log(res);
        if (res.code === '10001' && res.status === 'SUCCESS') {
          // 发送验证码不能点击状态, 倒计时60s, 否则可以点击, 恢复为发送验证码，清除定时器
          that.SMSSendClick = true;
          that.$message.success('短信发送成功，请注意查收');
          var time = setInterval(function () {
            if (second > 0) {
              that.txtusersend = '剩余' + second + '秒';
              second--;
              console.log(that.txtusersend);
            } else {
              that.SMSSendClick = false;
              that.txtusersend = '发送验证码';
              // 清除定时器
              clearInterval(time);
            }
          }, 1000);
          return false;
        };
        that.$message.error(res.msg);
      }, () => {
        that.$message.error('网络错误，请稍候再试');
      });
      return true;
    },
    // 修改密码
    modifyPassword () {
      var that = this;
      if (!that.makesure2) {
        return false;
      }
      // else if (!reg.test(that.modifyPasData.newPassword)) {
      //   that.$message.error('密码至少8位，字母、数字、特殊符号（必须包含其中两个）');
      //   return false;
      // }
      // 验证密码至少8位，字母、数字、特殊符号（必须包含其中两个）
      var regPassword = /^(?![0-9]+$)(?![a-zA-Z]+$)[\w~!@#$%^&*()_+`\-={}:";'<>?,./]{8,}$/;
      if (that.modifyPasData.newPassword === '') {
        that.$message.error('新密码不能为空');
        return false;
      } else if (!regPassword.test(that.modifyPasData.newPassword)) {
        that.$message.error('验证密码至少8位，字母、数字、特殊符号（必须包含其中两个)');
        return false;
      } else if (that.modifyPasData.refPassword === '') {
        that.$message.error('确认密码不能为空');
        return false;
      }
      that.makesure2 = false;
      that.fullscreenLoading2 = !that.fullscreenLoading2;
      http.post(api.changePassword, {
        token: that.token,
        mobile: that.tel,
        mobile_check_code: that.modifyPasData.code,
        password: that.modifyPasData.newPassword,
        password_confirmation: that.modifyPasData.refPassword
      }, (res) => {
        console.log(res);
        console.log(999);
        that.fullscreenLoading2 = !that.fullscreenLoading2;
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.$message.success(res.msg);
          // 清空
          if (that.modifyPasData.newPassword !== '') {
            that.modifyPasData.newPassword = '';
          }
          if (that.modifyPasData.refPassword !== '') {
            that.modifyPasData.refPassword = '';
          }
          if (that.modifyPasData.code !== '') {
            that.modifyPasData.code = '';
          }
          if (that.modifyPasData.imgcode !== '') {
            that.modifyPasData.imgcode = '';
          }
          // 3秒后可点击
          setTimeout(function () {
            that.makesure2 = true;
          }, 3000);
        } else {
          that.$message.error(res.msg);
          that.makesure2 = true;
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
        that.makesure2 = true;
        that.fullscreenLoading2 = !that.fullscreenLoading2;
      });
    },
    // 修改手机号
    modifyMobile () {
      var that = this;
      if (!that.makesure1) {
        return false;
      }
      // var mobilephoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
      var mobilephoneReg = /^1[34578]\d{9}$/;
      if (that.newPhone === '') {
        that.$message.error('新手机号不能为空');
        return false;
      } else if (!mobilephoneReg.test(that.newPhone)) {
        that.$message.error('手机号格式不正确');
        return false;
      } else if (that.tel === that.newPhone) {
        that.$message.error('新手机号和旧手机号一致');
        return false;
      }
      that.makesure1 = false;
      that.fullscreenLoading1 = !that.fullscreenLoading1;
      http.post(api.updateServiceMobile, {
        token: that.token,
        mobile: that.tel,
        mobile_check_code: that.modifyPasData.code,
        new_mobile: that.newPhone
      }, (res) => {
        console.log(res);
        that.fullscreenLoading1 = !that.fullscreenLoading1;
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.$message.success('修改手机号成功');
          // 清空
          if (that.modifyPasData.code !== '') {
            that.modifyPasData.code = '';
          }
          if (that.modifyPasData.imgcode !== '') {
            that.modifyPasData.imgcode = '';
          }
          if (that.newPhone !== '') {
            that.newPhone = '';
          }
          // 再次请求数据
          that.initdata();
          // 3秒后可点击
          setTimeout(function () {
            that.makesure1 = true;
          }, 3000);
        } else {
          that.$message.error(res.msg);
          that.makesure1 = true;
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
        that.makesure1 = true;
        that.fullscreenLoading1 = !that.fullscreenLoading1;
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.form {
  padding: 2rem;
  padding-right: 200px;
  margin-top: 15px;
  margin-bottom: 12px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 1px 1px 1px #999;

  .form-item {
    display: inline-block;
    margin-right: 35px;

    label {
      font-size: 14px;
      color: #333;
      width: 200px;
      display: inline-block;
    }

    .form-input, .form-select {
      width: 200px;
    }
  }

  .line {
    height: 15px;
  }
}

.server-item {
  width: 20px;
  height: 20px;
  margin: 5px;
}
.show-img
  opacity: 1
.hide
  opacity: 0
.btn-no-bg
  background: none
.img-path
  width: 124px
  height: 38px
  position: absolute
  top: 0
  left: 0
  cursor: pointer
</style>
